<template>
  <div class="FromGood">
    <el-form
      :model="From"
      :rules="ruleGood"
      ref="From"
      label-width="130px"
      class="demo-ruleForm"
    >
      <el-form-item label="选择商品" prop="name">
        <el-select disabled v-model="From.goods" placeholder="请选择商品">
          <el-option
            v-for="item in goods"
            :key="item.id"
            :label="item.goodsName"
            :value="item"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="提成金额" prop="name">
        <el-input-number
          v-model="From.commissionMoney"
          :step="1"
          :precision="0"
          :max="10000"
          :min="1"
        ></el-input-number>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :loading="loading" @click="submitForm('From')"
          >立即修改</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  props: ["id"],
  data() {
    let letterRule = (rule, value, callback) => {
      let reg = /^[a-zA-Z0-9_-]{4,18}$/;
      if (value === "") {
        callback(new Error("输入内容不能为空"));
      } else if (!reg.test(value)) {
        callback(new Error("请输入字母、数字、下划线"));
      } else {
        callback();
      }
    };
    return {
      loading: false,
      From: {
        goods: "",
        commissionMoney: 1,
      },
      ruleGood: {
        userName: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 2,
            max: 18,
            message: "长度在 2 到 18 个字符",
            trigger: "blur",
          },
          { validator: letterRule, trigger: "blur" },
        ],
      },
      goods: [],
      dialogImageUrl: "",
      dialogVisible: false,
    };
  },
  mounted() {
    this.initData();
  },
  async created() {
    let res = await this.http.get("/commissionApi/getById?id=" + this.id);
    if (!res.error)
      (this.From = {
        goods: {
          id: res.result.goodsId,
          goodsName: res.result.goodsName,
        },
        commissionMoney: res.result.commissionMoney,
      }),
        console.log(this.From);
    else
      this.eui.Message({
        message: `获取id为：'${this.id}'的用户信息失败`,
        type: "error",
      });
    console.log(this.From);
  },
  methods: {
    async initData() {
      let goods = await this.http.post("/goods/queryPage", { query: {} });
      this.goods = goods.error ? [] : goods.result.records;
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        console.log(valid);
        if (valid) {
          this.loading = true;
          this.updateuser();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    async updateuser() {
      let type = "success",
        rmsg;
      let req = {
        ...this.From,
      };
      if (!req.goods) {
        (type = "error"), (rmsg = "请选择商品");
      } else {
        let res = await this.http.post("/commissionApi/update", {
          id: this.id,
          goodsId: req.goods.id,
          goodsName: req.goods.goodsName,
          commissionMoney: req.commissionMoney,
        });
        if (!res.error) {
          (type = "success"), (rmsg = "修改成功");
        } else {
          (type = "error"), (rmsg = "修改失败");
        }
      }
      this.eui.Message({
        message: rmsg,
        type: type,
        duration: 5 * 1000,
      });
      this.loading = false;
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
  },
};
</script>

<style scoped>
.FromGood {
  width: 100%;
  min-height: 100%;
  padding: 15px;
  box-sizing: border-box;
}
</style>